/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./spectrum-picker.css");
@import url("./picker-overrides.css");

:host {
    --mod-popover-inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));

    display: inline-flex;
    vertical-align: top;

    /**
     * .spectrum-Picker
     * Move width management to :host
     **/
    max-inline-size: 100%;
    inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size));
    min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size)));
}

:host([quiet]) {
    width: auto;
    min-width: 0;
}

:host([disabled]) {
    pointer-events: none;
}

#button {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

#icon:not([hidden]) {
    display: inline-flex;
}

:host([readonly]) #button {
    user-select: inherit;
}

.picker,
.validation-icon {
    flex-shrink: 0;
}

sp-overlay {
    pointer-events: none;
}

sp-menu {
    pointer-events: initial;
}

:host > sp-menu {
    display: none;
}

/**
 * The accessibility team would prefer that it be possible to override the :focus-visible
 * heuristics in _some_ cases, like when clicking an `sp-field-label`...
 *
 * From Picker
 **/
:host([focused]:not([quiet])) #button #label.placeholder {
    /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-label.is-placeholder */
    color: var(--spectrum-picker-placeholder-text-color-key-focus, var(--spectrum-alias-placeholder-text-color-hover));
}

#label.visually-hidden ~ .picker {
    margin-inline-start: auto;
}

:host([focused]:not([quiet], [pending])) #button .picker {
    /* .spectrum-Picker-trigger.focus-ring .spectrum-Picker-icon */
    color: var(--spectrum-picker-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
}

.visually-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

sp-overlay:not(:defined) {
    display: none;
}

/* remove-focus-ring-safari-hack is a custom css class that we are using to
unset the focus ring styles in safari. This is a temporary fix because safari
sets the :focus-visible pseudo class on the parent element when the dialog is closed.
*/
#button.remove-focus-ring-safari-hack:focus-visible {
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
}

#button.remove-focus-ring-safari-hack:after {
    border: none;
}

#button.remove-focus-ring-safari-hack:focus-visible:after {
    box-shadow: none;
}

#button.remove-focus-ring-safari-hack:active {
    background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default)));
    border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default)));
    color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default)));
}
